<template>
  <div class="play_album" >
    <div class="box" ref="box">
      <div class="mask" ref="mask" v-show="richText">
        
        <div><van-icon name="arrow-down" @click="show"/></div>
      </div>
      <div class="jian" v-html="richText" v-show="richText" ref="rich"></div>
    </div>

    <div class="play_album_wrap" @click="goAlbum">
      <div class="img" @error="foo">
        <img :src="img" alt="" />
        <span class="icon"> </span>
      </div>
      <div class="info">
        <div class="title">{{ title }}</div>
        <div class="count">
          <span class="book">{{ subscribeCount | getCount }}订阅</span>
          <span class="total">{{ trackCount }}集</span>
        </div>
      </div>

      <div class="dy">
        <div class="dy_icon">
          <van-icon name="star-o" />
        </div>
        <p class="dy_tx">免费订阅</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      richText: "",
    };
  },
  props: {
    albumId: {
      type: Number,
    },
    title: {
      type: String,
    },
    subscribeCount: {
      type: Number,
    },
    trackCount: {
      type: Number,
    },
    img: {
      type: String,
    },
    richIntro: {
      type: String,
    },
  },
  watch: {
    // richIntro(val) {
    //   if (val) {
    //     this.$nextTick(() => {
    //       if (val) {
    //         console.log("8888", this.$refs.rich.offsetHight);
    //       }
    //     });
    //   } else {
    //     console.log("8888", this.$refs.rich.offsetHight);
    //   }
    // },
    richIntro: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val) {
          this.richText = val;

          if (this.richText) {
            this.$nextTick(() => {
              
                console.log("8888", this.$refs.rich.offsetHeight);
                if(this.$refs.rich.offsetHeight > 300){
                  console.log("超出了")
                  this.$refs.box.style.height = "300px"
                  this.$refs.box.style.overflow = "hidden"
                  this.$refs.mask.style.display = "block"
                }else{
                  
                  return
                }
              
            });
          }
        }
      },
    },
  },
  mounted() {
    // this.$nextTick(() => {
    //   if (this.richIntro) {
    //     console.log("8888", this.$refs.rich.offsetHight);
    //   }
    // });
  },

  methods: {
    foo(e) {
      let img = e.srcElement;
      img.src = "../../../assets/icon/common/img_load.png";
      img.onerror = null;
    },
    goAlbum() {
      this.$router.push("/album/" + this.albumId);
    },
    show(){
       this.$refs.box.style.height = "auto"
        this.$refs.box.style.overflow = "none"
        this.$refs.mask.style.display = "none"
    }
  },
};
</script>

<style lang="scss" scoped>
.play_album {
  background-color: #fff;
  padding: 15px;

  border-bottom: 1px solid #f3f4f5;
  .play_album_wrap {
    display: flex;
    .img {
      width: 50px;
      height: 50px;
      border-radius: 4px;
      background: url(../../../assets/icon/common/img_load.png) no-repeat;
      background-size: 100% 100%;
      position: relative;
      > img {
        width: 100%;
        height: 100%;
        border-radius: 4px;
      }
      .icon {
        display: inline-block;
        width: 7px;
        height: 32px;
        background: url(../../../assets/icon/common/album-bg.png) no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: -7px;
        top: 50%;
        margin-top: -16px;
      }
    }
    .info {
      padding-left: 15px;
      flex: 1;

      .title {
        width: 200px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 16px;
        color: #333;
        font-weight: 700;
        // margin-bottom: 12px;
      }
      .count {
        margin-top: 10px;
        color: #999;
        font-size: 14px;
        .book {
          margin-right: 20px;
        }
      }
    }
    .dy {
      width: 48px;
      .dy_icon,
      .dy_tx {
        text-align: center;
        color: #f86442;
      }
      .dy_icon {
        i {
          font-size: 28px;
        }
      }
      .dy_tx {
        text-align: center;
        font-size: 12px;
      }
    }
  }

  .box {
    // height: 300px;
    // overflow: hidden;
    position: relative;
    .mask {
      position: absolute;
      left: 0;
      width: 100%;
      bottom: 0;
      height: 150px;
      display: none;
      background-image: linear-gradient(
        -180deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.8) 34%,
        rgba(255, 255, 255, 0.95) 66%,
        #fff 100%
      );
      padding-top: 50px;
      div {
        text-align: center;
        i {
          font-weight: 700;
          font-size: 16px;
          color: #f86442;
        }
      }
    }
    /deep/.jian {
      img {
        width: 100% !important;
      }
      padding-bottom: 12px;
      background-color: rgb(255, 255, 255);
      line-height: 1.38;
    }
  }
}
</style>

